<script lang="ts" setup>
import DepartmentSelect from '@/components/departmentSelect.vue'
import { ref } from 'vue'
const radio = ref('一般')

const params = ref({
    pagenum:1,
    pagesize:10,
    radio:'',
    department:'   ',

})
const userList = ref([])
const total = ref(0)
const handleSizeChange = ()=>{

}
const handleCurrentChange = ()=>{

}
</script>

<template>
   <div class="wrapped">
    
       <div class="wrapped-content">
          <div class="select">
            <div class="input">
            <el-form-item v-model="params.department">
              <DepartmentSelect />
            </el-form-item>
            <el-form-item>
        <el-radio-group v-model="params.radio">
           <el-radio value="一般">一般 </el-radio>
           <el-radio value="重要">重要 </el-radio>
           <el-radio value="必要">必要 </el-radio>
            </el-radio-group>
            </el-form-item>
            </div>
            <div class="btn">
                <el-button type="primary">全部公告</el-button>
                <el-button type="primary">发布公司公告</el-button>
            </div>
          </div>
             <el-table :data="userList" border  style="width: 100%">
             <el-table-column  align="center" prop="date" label="序号" width="80" />
             <el-table-column align="center" prop="theme" label="公告主题" width="100" />
              <el-table-column align="center" prop="date" label="类别" width="80" />
             <el-table-column align="center" prop="department" label="发布部门" width="100" />
              <el-table-column align="center" prop="release_person" label="发布人" width="200" />
              <el-table-column align="center" prop="recipient" label="接收对象" width="200" />
              <el-table-column align="center" prop="level" label="公告等级" width="200" />
              <el-table-column align="center" prop="created_time" label="发布时间" width="200" />
              <el-table-column align="center" prop="update_time" label="最新编辑时间" width="200" />
              <el-table-column align="center" prop="read_number" label="阅读人数" width="200" />
             <el-table-column align="center" prop="address" fixed="right" label="操作"  width="120"/>
             <template #empty>
            <el-empty description="暂无数据" />
            </template>
             </el-table>       
            <el-pagination
                v-model:current-page="params.pagenum"
                v-model:page-size="params.pagesize"
                :page-sizes="[5, 10, 20, 30]"
                :background="true"
                layout="jumper,total, sizes, prev, pager, next "
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="float: right; margin: 10px 0;"

            />

   </div> 
    
   </div>
</template>

<style lang="scss" scoped>
.wrapped{
.wrapped-content{
    height: 600px;
    padding: 0 10px;
    .select{
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .input{
            display: flex;
            justify-content: flex-start;
            .el-input,.el-select{
              width: 200px;
              margin-right: 10px;
            }
            .el-button{
                margin-right:10px ;
            }
        }

    }
}
}
</style>